<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4">
			<my-form inline query :model="queryParams" :formItem="queryFormItem" :searchFn="() => refTable.reload()" />
		</div>
		<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
			<div class="p-10">
				<my-button type="danger" :disabled="!tableSelection.length" @click="deleteFn(tableSelection)" icon="Delete"> 删 除 </my-button>
			</div>
			<div class="flex-auto flex-col">
				<my-list-panel ref="refTable" :total="stateTable.total" :loadFn="loadData">
					<template #default="{ page, size }">
						<my-table :data="stateTable.list" :columns="stateTable.columns" @selection-change="(val) => (tableSelection = val)">
							<template #index="{ $index }">{{ $index + 1 + (page - 1) * size }}</template>
							<template #default="{ row }">
								<my-button-text @click="detailFn(row)">查看</my-button-text>
								<my-button-text @click="updateFn(row)">修改</my-button-text>
								<my-button-text @click="deleteFn(row)">删除</my-button-text>
							</template>
						</my-table>
					</template>
				</my-list-panel>
			</div>
		</div>

		<!-- 添加、修改对话框 -->
		<el-dialog top="10vh" :title="dialogTitle" v-model="dialog.open" width="66%" append-to-body destroy-on-close @closed="resetForm(refDialogForm)">
			<my-form ref="refDialogForm" :model="dialog.form" label-width="110px" :disabled="['detail'].includes(dialog.name)" :formItem="formItem" />
			<template #footer>
				<my-button @click="dialog.open = false">取 消</my-button>
				<my-button type="primary" @click="dialogSubmitFn()">确 定</my-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { pageProblemInfo as page, infoProblemInfo as info, removeProblemInfo as remove, editProblemInfo as edit } from '@a/system';
import { listMenu } from '@/api/system';

let menuList = ref([]);
listMenu({ menuTypes: ['M', 'C'] }).then((res) => {
	menuList.value = res.data;
});

const queryFormItem = computed(() => [
		{ label: '问题标题', prop: 'problemTitle' },
		{ label: '问题等级', prop: 'level', itemType: 'select', list: $store.dict.maintenanceGrade },
		{ label: '问题发生时间', prop: 'problemHappenTime', itemType: 'date' }
	]),
	formItem = computed(() => [
		{
			label: '问题菜单',
			prop: 'menuId',
			itemType: 'tree',
			list: menuList.value,
			props: {
				label: 'menuName'
			},
			col: { span: 12 }
		},
		{
			label: '问题等级',
			prop: 'level',
			itemType: 'select',
			list: $store.dict.maintenanceGrade,
			col: { span: 12 }
		},
		{
			label: '问题标题',
			prop: 'problemTitle',
			col: { span: 12 },
			required: true
		},
		{
			label: '问题发生时间',
			prop: 'problemHappenTime',
			itemType: 'date',
			col: { span: 12 },
			now: true,
			required: true
		},
		{
			label: '问题描述',
			prop: 'problemDesc',
			itemType: 'editor',
			required: true,
			height: '380px',
			disabled: ['detail'].includes(dialog.name)
		}
	]);

/********************************************************** 表格增删改查 ***********************************************************/
const columns = [
	{
		type: 'selection',
		align: 'center'
	},
	{
		label: '序号',
		prop: 'index',
		align: 'center',
		width: 60
	},
	{
		label: '问题等级',
		prop: 'level',
		align: 'center',
		formatter: (row) => selectDictLabel($store.dict.maintenanceGrade, row.level),
		width: 100
	},
	{
		label: '问题菜单',
		prop: 'menuName'
	},
	{
		label: '问题标题',
		prop: 'problemTitle'
	},
	{
		label: '问题发生时间',
		prop: 'problemHappenTime',
		align: 'center',
		width: 160
	},
	{
		label: '操作',
		fixed: 'right',
		align: 'center',
		width: 160
	}
];

const {
	queryParams,
	refTable,
	state: stateTable,
	refDialogForm,
	tableSelection,
	dialog,
	dialogTitle,
	loadData,
	deleteFn,
	updateFn,
	detailFn,
	dialogSubmitFn
} = pageMixin({
	columns,
	api: {
		page,
		remove,
		add,
		edit,
		info
	},
	dialogDefault: {
		title: '意见记录'
	}
});

$store.dict.GETmaintenanceGrade();
</script>

<style lang="scss" scoped></style>
